<template>
  <van-nav-bar
      title="我的课程"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <div class="learning-report">
    <h1 class="report-title">学习报告</h1>
    <p class="date">--2024.06.20--</p>
    <div class="recent-stats">
      <div class="stat-item">
        <span>今日学习:</span>
        <span>{{totalTodayStudy}}分钟</span>
      </div>
      <div class="stat-item">
        <span>本周学习:</span>
        <span>{{totalWeekStudy}}分钟</span>
      </div>
      <div class="chart-container">
        <img src="https://zpa-picgo.oss-cn-hangzhou.aliyuncs.com/img/c03632464d013b813eba8f566dc9793.png"  style="width: 400px; height: 230px;">
      </div>
      <div class="longest-study">最近7天学习最长: 单位: 分钟</div>
    </div>
    <div class="cumulative-stats">
      <div class="stat-item">
        <span>今日学习:</span>
        <span>{{totalTodayStudy}}分钟</span>
      </div>
      <div class="stat-item">
        <span>累计课程:</span>
        <span>{{totalLessons}}节课</span>
      </div>
      <div class="stat-item">
        <span>本周学习:</span>
        <span>{{totalWeekStudy}}分钟</span>
      </div>
    </div>
    <van-cell title="分享我的学习报告" isLink icon="share-o" @click="showShare = true" class="ddd"  />
    <van-popup v-model:show="show" :style="{ padding: '64px' }">内容</van-popup>
    <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="options"
    />
  </div>
</template>

<script setup>
import {computed, ref} from 'vue';
import {useRouter} from "vue-router";
import axios from "axios";
import {showToast} from "vant";
const router=useRouter();
const showShare = ref(false);
const options = [
  [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: 'wechat-moments' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' },
  ],
  [
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
    { name: '小程序码', icon: 'weapp-qrcode' },
  ],
];
const onClickLeft =()=>{
  router.push("/myCourse")
}
const show = ref(false);
const list1 = ref([
      {
        todayLearning:'',
        thisWeekLearning:'',
        totalLessons:'',

      }
    ]
)
const totalTodayStudy = computed(() => {
  return list1.value.map(item => item.todayLearning).reduce((sum, time) => sum + time, 0);
});
const totalWeekStudy = computed(() => {
  return list1.value.map(item => item.thisWeekLearning).reduce((sum, time) => sum + time, 0);
});
const totalLessons = computed(() => {
  return list1.value.map(item => item.totalLessons).reduce((sum, time) => sum + time, 0);
});
axios({
  method: 'get', // post  get
  url: 'http://localhost:9094/courseprogress/findAll'
}).then(
    (data) => {
     /* debugger*/
      console.log(JSON.stringify(data))
      var w = data.data;
      // 加载状态结束


      if (w.code == 0) {
        showToast("查询成功");
        list1.value = w.data;// 初始化界面
      } else {
        showToast("查询失败");
      }
    })
    .catch(
        function () {
          alert("服务器错误")
        }
    )
</script>

<style scoped>
.report-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.date {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}

.recent-stats,
.cumulative-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-container {
  width: 100%;
  height: 200px;
}

.longest-study {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}
.ddd{
  margin-top: 20px;
  color: #007bff;
}
</style>